<template>
  <view class="bd">
    <view class="inp-group" style="">
      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">身高(cm)</view>
        <input
          class="inp"
          type="digit"
          placeholder="请输入您的身高"
          v-model="user.height"
          maxlength="6"
          @input="checkNum($event, 1)"
        />
      </view>
      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">体重(kg)</view>
        <input
          class="inp"
          type="digit"
          placeholder="请输入您的体重"
          @input="checkNum($event, 2)"
          v-model="user.weight"
        />
      </view>
      <view class="inp-item uni-item-line flex flex-al-c" v-if="isTree">
        <view class="inp-title" style="width: 200upx">头围(cm)</view>
        <input
          class="inp"
          type="digit"
          placeholder="请输入您的头围"
          v-model="user.frontalFontanel"
          @input="checkNum($event, 3)"
        />
      </view>
      <view class="inp-item uni-item-line flex flex-al-c" v-if="isSix">
        <view class="inp-title" style="width: 200upx">左眼视力</view>
        <input
          class="inp"
          type="digit"
          placeholder="请输入您的视力"
          v-model="user.vision"
          @input="checkNum($event, 4)"
        />
      </view>
      <view class="inp-item uni-item-line flex flex-al-c" v-if="isSix">
        <view class="inp-title" style="width: 200upx">右眼视力</view>
        <input
          class="inp"
          type="digit"
          placeholder="请输入您的视力"
          v-model="user.rightVision"
          @input="checkNum($event, 5)"
        />
      </view>
      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">选择社区</view>
        <u-input
          v-model="user.areaName"
          type="textarea"
          :custom-style="zdy"
          placeholder="选择社区"
          :border="false"
          @tap="goSelectDep"
        />
      </view>
      <view class="inp-item uni-item-line flex flex-al-c">
        <view class="inp-title" style="width: 200upx">医保类型</view>
        <input
          class="inp"
          type="text"
          @tap="show = true"
          v-model="sqname"
          disabled
        />
        <u-picker
          v-model="show"
          mode="selector"
          :range="yblist"
          range-key="name"
          @confirm="getSelectVal"
        >
        </u-picker>
      </view>
      <view style="margin-top: 100upx">
        <button type="default" class="sbtn" @tap="sub">完成</button>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      sqname: "",
      insList: [],
      user: {
        height: "",
        weight: "",
        frontalFontanel: "",
        vision: "",
        rightVision: "", //右眼视力
        medicalInsuranceType: "" || 1,
      },
      selectorObj: [
        {
          name: "城市医保",
          id: 1,
        },
        {
          name: "农村医保",
          id: 2,
        },
      ],
      show: false,
      selectorObjIndex: 0,
      medicalInsuranceType: "1",
      touwei: "",
      shili: "",
      // areaName: '', // 地区加社区名称

      isTree: false,
      isSix: false,
      zdy: {
        float: "left",
        top: "-8px",
      },
      childAge: "",
      birthday: "",
    };
  },
  onLoad(options) {
    this.user = options.user ? JSON.parse(options.user) : this.user;
    console.log(this.user);
    // if (this.user.age >= 0 && this.user.age <= 3) {
    // 	this.isTree = true;
    // } else if (this.user.age > 3 && this.user.age <= 6) {
    // 	this.isSix = true;
    // }
    this.getChildrenAge();
    this.getInsType();
  },
  computed: {
    yblist() {
      let list = [];
      this.insList.forEach((item) => {
        let name = item.dictLabel;
        let id = item.dictCode;
        list.push({
          name: name,
          id: id,
        });
      });
      return list;
    },
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    getChildrenAge() {
      if (this.user.idCard.length == 15) {
        this.birthday = "19" + this.user.idCard.substr(6, 6);
      } else if (this.user.idCard.length == 18) {
        this.birthday = this.user.idCard.substr(6, 8);
      }
      // this.config.loading()
      this.config
        .get("/initUser/getMonthAge", {
          birthday: this.birthday,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            //console.log(res)
            if (res.data.data >= 0 && res.data.data <= 3) {
              this.isTree = true;
            } else if (res.data.data > 3 && res.data.data <= 6) {
              this.isSix = true;
            }
          }
        });
    },
    checkNum(e, type) {
      let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "");
      if (!val) {
        if (type == 1) {
          this.user.height = "";
        } else if (type == 2) {
          this.user.weight = "";
        } else if (type == 3) {
          this.user.frontalFontanel = "";
        } else if (type == 4) {
          this.user.vision = "";
        } else {
          this.user.rightVision = "";
        }
        return;
      }
      var reg = /[^\d.]/g;
      // 只能是数字和小数点，不能是其他输入
      val = val.replace(reg, "");
      // // 保证第一位只能是数字，不能是点
      val = val.replace(/^\./g, "");
      // // 小数只能出现1位
      val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      // // 小数点后面保留2位
      val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
      this.$nextTick(() => {
        if (type == 1) {
          this.user.height = val;
        } else if (type == 2) {
          this.user.weight = val;
        } else if (type == 3) {
          this.user.frontalFontanel = val;
        } else if (type == 4) {
          this.user.vision = val;
        } else {
          this.user.rightVision = val;
        }
      });
    },
    shows() {
      uni.showToast({
        title: "请输入信息",
        icon: "none",
      });
      return false;
    },
    valid() {
      if (!this.user.height) {
        this.shows();
      }
      if (!this.user.weight) {
        this.shows();
      }
      if (this.isTree && !this.user.frontalFontanel) {
        this.shows();
      }
      if (this.isSix && !this.user.vision) {
        this.shows();
      }
      if (this.isSix && !this.user.rightVision) {
        this.shows();
      }
      /* if(this.config.globalData.user.age<=3&&!this.child.headCircumference) return false;
				if(this.config.globalData.user.age>3&&!this.child.vision) return false; */
      const reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/;
      if (!reg.test(this.user.height)) {
        uni.showToast({
          title: "请输入正确的身高，如有小数请保留至后两位小数",
          icon: "none",
        });
        return;
      }
      if (this.user.height < 10 || this.user.height > 200) {
        uni.showToast({
          title: "身高的范围在10-200之间",
          icon: "none",
        });
        return;
      }
      if (!reg.test(this.user.weight)) {
        uni.showToast({
          title: "请输入正确的体重，如有小数请保留至后两位小数",
          icon: "none",
        });
        return;
      }
      if (this.user.weight < 0 || this.user.weight > 200) {
        uni.showToast({
          title: "体重的范围在0-200之间",
          icon: "none",
        });
        return;
      }
      if (this.isTree) {
        if (!reg.test(this.user.frontalFontanel)) {
          uni.showToast({
            title: "请输入正确的头围，如有小数请保留至后两位小数",
            icon: "none",
          });
          return;
        }
        if (this.user.frontalFontanel < 30 || this.user.frontalFontanel > 60) {
          uni.showToast({
            title: "头围的范围在30-60之间",
            icon: "none",
          });
          return;
        }
      }
      if (this.isSix) {
        if (!reg.test(this.user.vision)) {
          uni.showToast({
            title: "请输入正确的左视力，如有小数请保留至后两位小数",
            icon: "none",
          });
          return;
        }
        if (this.user.vision < 1 || this.user.vision > 10) {
          uni.showToast({
            title: "视力的范围在1-10之间",
            icon: "none",
          });
          return;
        }
        if (!reg.test(this.user.rightVision)) {
          uni.showToast({
            title: "请输入正确的右视力，如有小数请保留至后两位小数",
            icon: "none",
          });
          return;
        }
        if (this.user.rightVision < 1 || this.user.rightVision > 10) {
          uni.showToast({
            title: "视力的范围在1-10之间",
            icon: "none",
          });
          return;
        }
      }
      return true;
    },
    getSelectVal(v) {
      //console.log(v)
      this.selectorObjIndex = v[0];
      this.sqname = this.insList[v].dictLabel;
      this.user.medicalInsuranceType = this.insList[v].dictValue;
      //console.log(this.user.medicalInsuranceType)
    },
    // 获取医保类型
    getInsType() {
      let self = this;
      // this.config.loading()
      this.config
        .get("/util/sysDictData/type/medical_insurance_type", {})
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.insList = res.data.data;
            self.sqname = self.insList[0].dictLabel;
            //console.log(self.insList)
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 去选择社区
    goSelectDep() {
      uni.navigateTo({
        url:
          "/pages/reg/select-dep?user=" +
          JSON.stringify(this.user) +
          "&url=/pages/reg/answer",
      });
    },
    sub() {
      if (!this.valid()) return;
      let self = this;
      let url =
        this.user.subType == "1" ? "/family/perfect" : "/initUser/perfect";
      uni.showLoading({
        title: "加载中",
        mask: true,
      });

      this.config.post(url, this.user).then((res) => {
        if (res.data.code === 200) {
          uni.hideLoading();
          uni.showToast({
            title: res.data.msg,
          });
          self.config.getLoginInfo();
          setTimeout((s) => {
            uni.switchTab({
              url: "/pages/home/home",
            });
          }, 1000);
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
uni-view.u-input {
  top: 34rpx;
}

// 表单
.inp-group {
  width: 85%;
  margin: 0 auto;

  .inp-item {
    margin-top: 10upx;
    display: flex;
    flex-direction: row;
    align-items: self-end;

    .inp-title {
      padding: 15upx 0;
      margin-top: 30upx;
      font-size: 30upx;
      font-weight: 900;
      color: #777;
    }

    .inp {
      padding: 15upx 0;
      color: #333;
      margin-top: 30upx;
    }
  }

  .sbtn {
    background: #18c7e1;
    color: #fff;
  }
}

.gravid {
  color: #999;
  font-size: 20upx;
}

.gravid.active {
  color: #18c7e1;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
    height: calc(100vh - var(--window-top));
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .t1 {
    color: #ccc !important;
  }
  >>> input {
    color: #ccc !important;
  }
}
</style>